<template>
    <div id="home" class="detail gi_page home home">
        <div class="detail_header">
            <a-affix>
                <a-page-header title="用戶列表" subtitle="詳情" @back="onBack">
                </a-page-header>
            </a-affix>
        </div>
        <a-row class="home__content">
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
                <div class="home__item">
                    <a-card size="medium" class="card gi_card_title">
                        <template #cover>
                            <div
                                :style="{
                                  position: 'absolute',
                                  right: '20px',
                                  top: '20px',
                                  height: '80px',
                                  width: '80px',
                                  display: 'flex',
                                  justifyContent: 'flex-end',
                                  alignItems: 'center',
                                  backgroundImage: `url(${customerInfo?.status==4?studyDisabled:study})`,
                                  backgroundSize: 'cover',
                                }"
                            >
                            </div>
                        </template>
                        <a-descriptions :column="2" size="large" title="賬號信息">
                            <a-descriptions-item label="UID" style="padding-left: 50px">
                                <a-typography-paragraph copyable>{{ customerInfo?.customerId }}</a-typography-paragraph>
                            </a-descriptions-item>
                            <a-descriptions-item label="創建時間">{{
                                    customerInfo?.createTime || '-'
                                }}
                            </a-descriptions-item>
                            <a-descriptions-item label="登入賬號">{{
                                    customerInfo?.loginName || '-'
                                }}
                            </a-descriptions-item>
                            <a-descriptions-item label="登入密碼">
                                <a-link @click="handleClick">修改密碼</a-link>
                            </a-descriptions-item>
                            <a-descriptions-item label="賬號狀態">
                                <a-tag v-if="customerInfo?.status === 1" color="green">启用</a-tag>
                                <a-tag v-else-if="customerInfo?.status === 4" color="red">未激活</a-tag>
                                <a-tag v-else color="red">禁用</a-tag>
                            </a-descriptions-item>
                            <a-descriptions-item label="激活時間">{{
                                    customerInfo?.activateTime || '-'
                                }}
                            </a-descriptions-item>
                        </a-descriptions>
                    </a-card>
                </div>
            </a-col>

            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
                <div class="home__item">
                    <a-card class="general-card" title="用戶信息">
                        <a-row justify="space-between">
                            <a-col :span="2">
                                <div
                                    :style="{
                                  position: 'relative',
                                  left: '60%',
                                  overflow: 'hidden',
                                  top: '0px',
                                  height: '80px',
                                  width: '80px',
                                  borderRadius: '50%',
                                  display: 'flex',
                                  justifyContent: 'flex-start',
                                  alignItems: 'center',
                                  backgroundImage: 'url(' + customerInfo?.userHeadImage + ')',
                                  backgroundSize: '80px 80px',
                                  backgroundRepeat: 'no_repeat',
                                  backgroundPosition: 'center',
                                }"
                                >
                                </div>
                            </a-col>
                            <a-col :span="21">
                                <a-descriptions :column="2" size="large">
                                    <a-descriptions-item label="用戶姓名">
                                        {{
                                            customerInfo?.realName || '-'
                                        }}
                                    </a-descriptions-item>
                                    <a-descriptions-item label="性別">
                                        <span v-if="customerInfo?.sex === 1">男</span>
                                        <span v-else-if="customerInfo?.sex === 2">女</span>
                                        <span v-else>未知</span>
                                    </a-descriptions-item>
                                    <a-descriptions-item label="綁定電話">{{
                                            customerInfo?.phoneNumber || '-'
                                        }}
                                    </a-descriptions-item>
                                    <a-descriptions-item label="身份證號碼">
                                        {{ customerInfo?.identityCode || '-' }}
                                    </a-descriptions-item>
                                    <a-descriptions-item label="護照號碼">{{
                                            customerInfo?.passportNumber || '-'
                                        }}
                                    </a-descriptions-item>
                                </a-descriptions>
                            </a-col>
                        </a-row>
                    </a-card>
                </div>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
                <div class="home__item">
                    <a-card class="general-card" title="學習統計">
                        <a-row justify="space-between">
                            <a-col :span="5" style="border-right: 1px solid #b3b3b3">
                                <a-space class="time_detail">
                                    <div class="time_detail_title">累計學習時長</div>
                                    <div class="time_detail_content">{{ dataDetail?.totalStrStudyTime || 0 }}</div>
                                </a-space>
                            </a-col>
                            <a-col :span="5" style="border-right: 1px solid #b3b3b3">
                                <a-space class="time_detail">
                                    <div class="time_detail_title">本週學習時長</div>
                                    <div class="time_detail_content">{{ dataDetail?.weekStrPracticeTime || 0 }}</div>
                                </a-space>
                            </a-col>
                            <a-col :span="5" style="border-right: 1px solid #b3b3b3">
                                <a-space class="time_detail">
                                    <div class="time_detail_title">累計練習時長</div>
                                    <div class="time_detail_content">{{ dataDetail?.totalStrPracticeTime || 0 }}</div>
                                </a-space>
                            </a-col>
                            <a-col :span="5">
                                <a-space class="time_detail">
                                    <div class="time_detail_title">本週練習時長</div>
                                    <div class="time_detail_content">{{ dataDetail?.weekStrPracticeTime || 0 }}</div>
                                </a-space>
                            </a-col>
                        </a-row>
                    </a-card>
                </div>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
                <div class="home__item">
                    <a-spin style="width: 100%">
                        <a-card class="general-card" title="考試記錄">
                            <a-row justify="space-between">
                                <a-col :span="6">
                                    <a-space class="time_detail">
                                        <div class="time_detail_title">累計考试次数</div>
                                        <div class="time_detail_content">{{ dataDetail?.totalExamTime || 0 }}</div>
                                    </a-space>
                                </a-col>
                                <a-col :span="6">
                                    <a-space class="time_detail">
                                        <div class="time_detail_title">考試合格次數</div>
                                        <div class="time_detail_content">{{ dataDetail?.passExamCount || 0 }}</div>
                                    </a-space>
                                </a-col>
                                <a-col :span="6">
                                    <a-space class="time_detail">
                                        <div class="time_detail_title">考試合格率</div>
                                        <div class="time_detail_content">{{ dataDetail?.passRate || 0 }}</div>
                                    </a-space>
                                </a-col>
                                <a-col :span="6">
                                    <a-space class="time_detail">
                                        <div class="time_detail_title">平均分數</div>
                                        <div class="time_detail_content">{{ dataDetail?.avgScore || 0 }}</div>
                                    </a-space>
                                </a-col>
                            </a-row>
                            <a-table row-key="name" :columns="columns"
                                     style="margin-top: 40px"
                                     :data="dataList"
                                     :pagination="false"
                                     row-class="common-row">
                                <template #whetherExamPass="{ record }">
                                     <span v-if="record.whetherExamPass==true">
                                            <icon-check-circle-fill class="success"/>
                                            <span>通過</span>
                                     </span>
                                    <span v-if="record.whetherExamPass==false">
                                            <icon-check-circle-fill class="warning"/>
                                            <span>未通過</span>
                                     </span>
                                </template>
                                <template #action="{ record }">
                                    <a-space>
                                        <a-link
                                            v-if="record.doMainType ==='3'"
                                            :title="'查看證書'"
                                            @click="certificate(record)"
                                        >
                                            查看證書
                                        </a-link>
                                    </a-space>
                                </template>
                            </a-table>
                        </a-card>
                    </a-spin>
                </div>
            </a-col>
        </a-row>
        <!--        <a-back-top :visible-height="100" target-container="#home"/>-->
        <div class="actions" v-if="customerInfo?.status !== 4">
            <a-space>
                <a-button :loading="loading" style="border: 1px solid #A26028;color: #a26028">
                    <span v-if="customerInfo?.status === 1" @click="disAble(2)">禁止訪問</span>
                    <span v-if="customerInfo?.status === 2" @click="disAble(1)">啓用訪問</span>
                </a-button>
                <a-button type="primary" @click="handleClick">
                    編輯資料
                </a-button>
            </a-space>
        </div>
        <a-modal v-model:visible="visible"
                 draggable
                 title="編輯資料"
                 title-align="start"
                 :mask-closable="false"
                 :esc-to-close="false"
                 :modal-style="{ maxWidth: '800px' }"
                 :body-style="{ maxHeight: '50vh' }"
                 :width="'42%'"
                 ok-text="保存修改"
                 :ok-loading="okLoading"
                 @ok="handleOk" @cancel="handleCancel">
            <a-form ref="formRef" :model="form" :rules="rules" size="large" :style="{width:'600px'}">
                <a-form-item field="realName" label="用戶姓名" required>
                    <a-input v-model="form.realName" placeholder="请输入用戶姓名" allow-clear/>
                </a-form-item>
                <a-form-item field="sex" label="用戶性別">
                    <a-radio-group v-model="form.sex">
                        <a-radio :value="1">男</a-radio>
                        <a-radio :value="2">女</a-radio>
                        <a-radio :value="3">其他</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item field="identityCode" label="身份證號碼">
                    <a-input v-model="form.identityCode" placeholder="请输入身份證號碼" allow-clear/>
                </a-form-item>
                <a-form-item field="enablePassword" label="登入密碼">
                    <a-input v-model="form.enablePassword" placeholder="请输入登入密碼" allow-clear/>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>
<script setup lang="ts">
import {listExamRecord} from '@/apis/live/examRecord'
import {getCustomerExamStatist,getExamCertificate} from "@/apis/common/statics";
const appStore = useAppStore()
const isDark = computed(() => appStore.theme === 'dark')
import {computed} from "vue";
import {useAppStore, useTabsStore} from "@/stores";
import type {TableInstanceColumns} from "@/components/GiTable/type";
import {type FormInstance, Message, Modal} from "@arco-design/web-vue";
const loading = ref(false)
defineOptions({name: 'Workplace'})
const xAxis = ref<string[]>([])
const router = useRouter()
const tabsStore = useTabsStore()
const route = useRoute()
const {id, type} = route.query
import study from '@/assets/images/study.png';
import studyDisabled from '@/assets/images/study_disabled.png';
import {
    updateStatus, getCustomer, updateCustomer
} from '@/apis/mch/customer'
import type * as T from '@/apis/mch/type'
import type * as B from '@/apis/live/type'
import type * as C from '@/apis/common/type'
import {useForm} from "@/hooks";

const {form, resetForm} = useForm({
    sex: 1,
    realName: '',
    identityCode: '',
    enablePassword: ''
})

const rules: FormInstance['rules'] = {
    realName: [{required: true, message: '请输入用戶姓名'}]
}
const columns: TableInstanceColumns[] = [
    {title: '考試名稱', dataIndex: 'doMainName', show: true},
    {title: '考試分數', dataIndex: 'customerScore', slotName: 'customerScore', show: true},
    {
        title: '考試時間',
        align: 'center',
        dataIndex: 'createTime',
        slotName: 'createTime',
        ellipsis: true,
        tooltip: true
    },
    {
        title: '是否通過',
        align: 'center',
        dataIndex: 'whetherExamPass',
        slotName: 'whetherExamPass',
        ellipsis: true,
        tooltip: true,
    },
    {
        title: '操作',
        slotName: 'action',
        align: 'center',
    }
]

const visible = ref(false);
const okLoading = ref(false);
const handleOk =async () => {
    okLoading.value = true;
    form.customerId = id as string;
    await updateCustomer(form);
    Message.success('修改成功');
    visible.value = false;
    okLoading.value = false;
    await getCustomerInfo();
};
const handleCancel = () => {
    visible.value = false;
}

const handleClick = () => {
    visible.value = true;
};

const dataList = ref<B.ExamRecordDto[]>([])
const getData = async () => {
    const res = await listExamRecord({customerId: id})
    dataList.value = res.data
}

const customerInfo = ref<T.CustomerDto>()

const certificate = (record: B.ExamRecordDto) => {
    const res = getExamCertificate({examRecordId: record.examRecordId})
    console.log(res)
}

const getCustomerInfo = async () => {
    const res = await getCustomer(id)
    customerInfo.value = res.data
    form.realName = res.data?.realName
    form.sex = res.data?.sex
    form.identityCode = res.data?.identityCode
    form.enablePassword = res.data?.enablePassword
}
const dataDetail = ref<C.MchUserStudyStatistic>()
const getCustomerExamStatistData = async () => {
    const res = await getCustomerExamStatist({customerId: id})
    dataDetail.value = res.data
}

const disAble = async (status: number) => {
    try {
        const title = status === 1 ? '确认啓用用户访问？' : '确认禁止用户访问？';
        const content = status === 1 ? '您確定要啓用用户访问嗎？學生將繼續访问学习。' : '您確定要禁止用户访问嗎？學生將無法繼續访问学习。';
        loading.value = true
        Modal.warning({
            title: title,
            content: content,
            cancelText: '取消',
            okButtonProps: {status: 'danger'},
            hideCancel: false,
            draggable: true,
            maskClosable: false,
            onOk: async () => {
                const params = {
                    customerId: id,
                    status: status
                }
                await updateStatus(params)
                customerInfo.value.status = status
                Message.success('修改成功')
            },
        });
    } catch (error) {

    } finally {
        loading.value = false
    }
}
const data = ref<string[]>([])
onMounted(() => {
    getCustomerInfo();
    getData();
    getCustomerExamStatistData();
})
const onBack = () => {
    router.go(-1);
    tabsStore.closeCurrent(route.path)
}

const renderData = ref<any[]>([]);
</script>

<style lang="scss" scoped>

.time_detail {
    height: 100%;
    display: flex;
    flex-direction: column;

    &_header {
        background: var(--color-bg-1);
    }

    &_title {
        font-size: 14px;
        background: var(--color-bg-1);
    }

    &_content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding: 20px;
        font-size: 24px;
        background: var(--color-bg-1);
    }
}

.home {
    padding: 0;

    span.link {
        cursor: pointer;
        color: rgb(var(--arcoblue-6));
        font-weight: bold;

        &:hover {
            opacity: 0.7;
        }
    }

    &__content {
        padding: 6px;
    }

    &__item {
        padding: 6px;
        box-sizing: border-box;
    }

    .backtop-icon {
        cursor: pointer;
    }
}

//.actions {
//    position: fixed;
//    left: 0;
//    right: 0;
//    bottom: 0;
//    height: 60px;
//    padding: 14px 20px 14px 0;
//    background: var(--color-bg-2);
//    text-align: right;
//    z-index: 1;
//}
.actions {
    position: absolute;
    bottom: 0;
    right: 20px;
    padding-right: 40px;
    width: 100%;
    height: 72px;
    font-size: 13px;
    color: var(--color-text-3);
    background-color: var(--color-bg-1);
    border-top: 1px solid var(--color-neutral-3);
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
</style>
